<template>
	<view>
		<u-navbar :border-bottom="false">
			<u-search placeholder="查找" v-model="keyword" :show-action="false"></u-search>
			<view class="u-m-r-30" slot="right"></view>
		</u-navbar>
		<view class="row u-border-bottom" v-for="(item,index) in list" :key="index">
			<view class="avatar">
				<u-avatar :src="item.avatarUrl" size="110" mode="square"></u-avatar>
			</view>
			<view class="content" @tap="pickMsg(item)">
				<view class="u-flex u-row-between u-m-t-10">
					<text class="u-font-36">{{item.userName}}</text>
					<text class="text-gray">{{item.createTime|dateDiff}}</text>
				</view>
				<view class="u-m-t-10 u-font-28 text-gray">
					<row-light :max="21" :part="keyword" :full="item.content"></row-light>
				</view>
			</view>
		</view>
		<view class="u-font-32">
		</view>
		<u-empty v-if="nomore&&!list.length" text="没有找到相关记录" mode="search" margin-top="100"></u-empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		searchHistory
	} from "@/api/session.js"
	import rowLight from "./rowLight.vue"
	import lightText from "@/components/lightText/lightText.vue"
	import { msgTypes } from '@/IM';
	import {dateDiff} from "@/utils/util.js"
import { ConversationType } from '../../entity/ConversationType';
import { Conversation } from '../../entity/Conversation';
	export default {
		components: {
			lightText,
			rowLight
		},
		data() {
			return {
				list: [],
				loading:false,
				nomore:false, 
				
				id: '',
				type:ConversationType.Group,
				keyword: '',
				pageNo: 1,
				pageSize: 10,
				startTime: 0,
				endTime: Date.now(),
			};
		},
		computed: {
			...mapState('chat', {
				conversation({
					conversationMap
				}) {
					return conversationMap[this.id]
				}
			}),
		},
		filters:{
			dateDiff
		},
		watch:{
			keyword(val){
				if(val){
					this.$u.debounce(this.reset, 1000)
				}else{
					this.reset()
				}
			}
		},
		onLoad({
			id,
			type
		}) {
			this.id = id
			this.type = Number(type)
			this.reset()
		},
		onReachBottom() {
			this.more()
		},
		methods: {
			async pickMsg(msg){
				const { eventChannel } = await new Promise((resolve,reject)=>{
					uni.navigateTo({
						url:`/pages/room/history?id=${this.id}&type=${this.type}`,
						success:resolve,
						fail:reject
					})
				})
				eventChannel.emit('initMsg',msg)
			},
			async reset() {
				this.list = []
				this.pageNo = 1
				this.nomore = false
				if(!this.keyword){
					return
				}
				await this.more()
			},
			async more() {
				if(this.loading){
					throw new Error('正在请求中')
				}
				try{
					this.loading = true
					if(this.nomore){
						return []
					}
					const list = await searchHistory({
						id:this.id,
						chatType:Conversation.type2Biz(this.type),
						msgType:msgTypes.TEXT,
						keyword:this.keyword,
						startTime:this.startTime,
						endTime:this.endTime,
						order:'desc',
						pageNo:this.pageNo,
						pageSize:this.pageSize
					})
					if(!list||list.length<this.pageSize){
						this.nomore = true
					}else{
						this.pageNo++
					}
					this.list.push(...list)
					return list
				}finally{
					this.loading = false
				}
				
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.row {
		display: flex;
		padding: 20rpx 0;
		margin: 0 30rpx;

		.avatar {
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.content {
			flex: 1;
			width: 100rpx;
			overflow: hidden;
		}

	}
</style>